<template>
	<view style="background-color: #f8f8f8;">
		<view class="search_box">
			<view class="add_zhi" @tap="jump('/pages/bbs/sendSort/sendSort')" >
				<image class="add_img" :src="photo_cdn+'/zpupload/static/zuzhi/addbtn.png'"></image>
				<view class="add_text">发布</view>
			</view>
			<view class="search_borderzz">
				<image class="sousuo" :src="photo_cdn+'/zpupload/static/zuzhi/sousuo.png'" mode=""></image>
				<input  v-model="sousuo" confirm-type="search"  class="search_input" placeholder="家谱是什么"></input>
				<view class="search_subbtn"  @tap="souusofun()">搜索</view>
			</view>
		</view>
		
		<u-notice-bar2 mode="horizontal" :bgColor="'#FFF'" :color="'#000'" :list="noticebar" ></u-notice-bar2>
		
		<view class="" >
			<Item :lists="lists"></Item>
		</view>
		
		<view class="menu_user_list">
			
			<view class="" style="display: flex; justify-content: space-between;">
				<view class="" style="font-size: 36rpx;font-family: Lexend Zetta;">
					可能感兴趣的圈子
				</view>
				<view class="" style="font-size: 36rpx; color: #9B9B9B;font-family: Lexend Zetta;" @tap="selectquanzifun()" >
					换一换 &nbsp; >
				</view>
			</view>
			
			<view class="" style=" border-radius: 30rpx; background-color: #fff;">
				<itemBbs  v-for="(item,index) in quanzi" :key="index" :list="item" ></itemBbs>				
				<!-- <itemBbs></itemBbs> -->
			</view>
			
			
			<view class="" style="display: flex; justify-content: space-between; margin-top: 20rpx; margin-bottom: 20rpx;">
				<view class="" style="font-size: 36rpx;font-family: Lexend Zetta;">
					圈子话题推荐
				</view>
				<view class="" style="font-size: 36rpx; color: #9B9B9B;font-family: Lexend Zetta;" >
					<!-- 换一换 &nbsp; > -->
				</view>
			</view>
			
			<view style=" width: 100%;height: 55rpx; align-items: center; display: flex; margin-top: 15rpx;">
				<scroll-view ref="tabbar1"   style=" flex-direction: row;width: 100%;" scroll-x :scroll="false" :show-scrollbar="false" >
					<view style=" display: flex;  justify-content:space-between; align-items: center;">
						<view v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"  :data-id="index" :data-current="index" @click="selectfun(tab,index)">
							<text class="title"  v-if="nav_active != tab.id" style="font-size: 36rpx; color: #7a7a7a; ">{{tab.title}}</text>
							<text class="title"  v-if="nav_active == tab.id" style="font-size: 36rpx; font-weight: bold;">{{tab.title}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			
			<swiper style="width: 100%; height: 15vh; margin-top: 35rpx;" :current-item-id="nav_active" circular :disable-touch="true"  >
				<swiper-item   v-for="(item,index) in tabBars" :key="item.id" :item-id="item.id">  
						<view class="" style=" border-radius: 30rpx; background-color: #fff; border-bottom: 1rpx solid #e7e7e7; margin-bottom: 25rpx;">
							<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="width: 100%;height: 15vh; "   @scrolltolower="upper">
							<itemSwiper  v-for="(item1,key) in item.list.data" :key="key" :list="item1"    ></itemSwiper>
							</scroll-view>
						</view>
				</swiper-item>
			</swiper>
			
			
			
		</view>	
	</view>
</template>

<script> 


	import {bbsIndx,bbsGetSort,bbsGetContent} from "@/utils/api/bbs.js";
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	import Item from "./components/item-page/item-page.vue";
	import itemBbs from "./components/item-bbs/item-bbs.vue";
	import itemSwiper from "./components/item-swiper/item-swiper.vue"
	export default {
		props: {
			actives: {
				type:String,
			},
		},
		components:{
			Item,
			itemBbs,
			itemSwiper
		},
		data() {
			return {
				photo_cdn,
				noticebar: [],
				lists:null,
				quanzi:null,
				tabBars:null,
				nav_active:'id1',
				nav_index:0,
				
				sousuo:null
			}
		},
		onShow() {
		},
		computed:{
			myActive:function(){
				this.getonLoadList();
				return this.actives
			},
		},
		watch: {
			myActive:function(newVal){
			  if(newVal){
				console.log(newVal)
			  }
			},
		},
		methods: {
			souusofun(){
				if(!this.sousuo){
					this.$api.msg("请输入内容！");
					return false;
				}
				uni.navigateTo({
					url:'/pages/bbs/find/find?name='+this.sousuo
				})
			},
			//跳转
			jump(e){
				console.log(e)
				uni.navigateTo({
					url:e
				})
			},
			getonLoadList(){
				bbsIndx().then(res=>{
					console.log(res)
					this.noticebar = res.data.noticebar;
					this.lists = res.data.list;
					this.quanzi = res.data.quanzi;
					this.tabBars = res.data.tabBars;
					this.nav_active = res.data.nav_active;
				})
			},
			getContentfun(){
				bbsGetContent().then(res=>{
					console.log(res)
				})
			},
			//切换圈子
			selectquanzifun(){
				bbsGetSort().then(res=>{
					console.log(res)
					this.quanzi = null;
					this.quanzi = res.data.quanzi;
				})
			},
			selectfun(e,index){
				this.nav_index = index;
				this.nav_active=e.id;
				let data = this.tabBars[index];
				if(data.list.length < 1){
					bbsGetContent({
						type:e.id,
						page:1
					}).then(res=>{
						console.log(res)
						this.tabBars[index]['list'] = res.data
					})
				}
			},
			upper: function(e) {
				console.log(e)
				let num = this.tabBars[this.nav_index].list.current_page * this.tabBars[this.nav_index].list.per_page;
				if(this.tabBars[this.nav_index].list.data.length == num ){
					bbsGetContent({
						type:this.tabBars[this.nav_index].id,
						page:this.tabBars[this.nav_index].list.current_page+1
					}).then(res=>{
						console.log(res)

						for( var a = 0 ; a < res.data.data.length; a++){
							this.tabBars[this.nav_index].list.data.push(res.data.data[a])
						}
						
						this.tabBars[this.nav_index].list.current_page = this.tabBars[this.nav_index].list.current_page+1;
					})
					
				}
				
				
			},
		}
	}
</script>

<style lang="scss">
	
	.menu_user_list{
		padding: 20rpx 0;
		margin: 20rpx;
		box-shadow: 8rpx -4rpx 2rpx 2rpx #F8F8F8;
	}
	
	.search_box{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		box-sizing: border-box;
		/* #ifdef MP-WEIXIN */
		padding-right: 28%;
		/* #endif */
	}
	.add_zhi{
		width: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10rpx;
		.add_img{
			width: 50rpx;
			height: 50rpx;
		}
		.add_text{
			font-size: 20rpx;
			color: $themecolor;
		}
	}
	
	.search_borderzz{
		position:relative;
		margin: 20rpx;
		border: 1px solid $themecolor;
		height: 68rpx;
		border-radius: 33rpx;
		background:#F5F4F4;
		width: 100%;
		.search_input{
			padding-left:70rpx;
			height: 68rpx;
			line-height: 70rpx;
			color:#000000;
			font-size: 28rpx;
		}
		.sousuo{
			position: absolute;
			z-index:2;
			left: 30rpx;
			top: 20rpx;
			width: 27rpx;
			height: 27rpx;
		}
		.search_subbtn{
			position: absolute;
			right: 15rpx;
			top: 6rpx;
			z-index:2;
			width: 100rpx;
			height: 50rpx;
			line-height:50rpx;
			background: $themecolor;
			border-radius: 28rpx;
			text-align:center;
			color:#FFFFFF;
			font-size:28rpx;
		}
	}

</style>
